<template>
	<view>
		<view class="roleStrClass" v-show="token">
			<span>{{roleStr}}</span>
		</view>
		<view style="text-align: center;background-color:aliceblue;height: 180px;">
			<image src="/static/default_avatar.png" mode="aspectFill" style="width: 60px; height: 60px;margin-top: 10px;">
			<view style="height: 60px;" v-show="token">
				<view>
					账号：{{username}}
				</view>
			</view>
			<view style="height: 60px;" v-show="!token">
				<span @click="denglu">未登录</span>
			</view>
		</view>
		<view class="infoClass">
			<span style="font-size: 20px;">订单列表</span>
			<view class="infoItemClass">
				<span @click="dingdan(0)">全部</span>
				<span @click="dingdan(1)">待接单</span>
				<span @click="dingdan(2)">送货中</span>
				<span @click="dingdan(3)">已完成</span>
				<span @click="dingdan(4)">已取消</span>
			</view>
		</view>
		<view class="infoClass" v-if="roleStr === '管理员'">
			<span style="font-size: 20px;">用户列表</span>
			<view class="infoItemClass">
				<span @click="userList(0)">全部</span>
				<span @click="userList(1)">用户</span>
				<span @click="userList(2)">司机</span>
			</view>
		</view>
		<view class="settingClass" v-show="token">
			<button @click="tuichu" type="default">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roleStr: '用户端',
				token: '',
				username: '',
				httpUrl: 'http://192.168.31.178:8084/api',
			}
		},
		onShow() {
			var isRole = uni.getStorageSync('isRole');
			var token = uni.getStorageSync('token');
			var username = uni.getStorageSync('username')
			if(token){
				this.token = token
			} else {
				uni.showToast({title:'请先登录',icon:'error',duration: 2000})
				this.denglu()
			}
			if(username){
				this.username = username
			}
			console.log(isRole)
			if(isRole === 1){
				this.roleStr = '用户端';
			} else if(isRole === 2){
				this.roleStr = '司机端';
			} else if(isRole === 3){
				this.roleStr = '管理员';
			}
		},
		methods: {
			denglu(){
				uni.navigateTo({
				    url: '/pages/login/login'
				});
			},
			tuichu(){
				var that = this
				uni.request({
					url: that.httpUrl + '/login/logout',
					method: 'POST',
					header: {
						'like-token':this.token
					},
					success(res) {
						console.log(res);
						if (res.data.code === 333) {
							uni.navigateTo({
								url: '/pages/login/login'
							});	
						} else if (res.data.code !== 200) {
							uni.showToast({title:res.data.msg,icon:'error',duration: 2000})
							return
						} else{
							uni.showToast({title:'退出成功',duration: 2000})
							uni.removeStorageSync('token')
							uni.removeStorageSync('isRole')
							that.token = '';
							that.username = '';
							that.isRole = 0
							that.denglu();
						}
					},
					fail(err) {
						uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
					}
				})
			},
			dingdan(status){
				uni.navigateTo({
					url: '/pages/orderlist/orderlist?status=' + status
				});
			},
			userList(isRole){
				uni.navigateTo({
					url: '/pages/userList/userList?isRole=' + isRole
				});
			}
		}
	}
</script>

<style>
.roleStrClass{
	background-color:aliceblue;
	width: 100%;
	padding-top: 20px;
	font-size: 16px;
	padding-left: 20px;
}
.infoClass{
	margin-top: 20px;
	padding-left: 20px;
	background-color: beige;
}
.infoItemClass{
	margin-top: 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	flex-wrap: nowrap;
	font-size: 17px;
	height: 50px;
}
.settingClass{
	position: fixed;
	bottom: 100px;
	width: 100%;
	font-size: 16px;
}
</style>
